<template>
    <div class="tabs">
        <el-tabs type="border-card">
            <el-tab-pane label="专家专区">
                <!-- 内容展示 -->
                <div class="showcard">
                    <Card v-for="item in 6" :key="item" class="ccard"/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="热门">
                <!-- 内容展示 -->
                <div class="showcard">
                    <Card v-for="item in 6" :key="item" class="ccard"/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="有问题">
                <!-- 内容展示 -->
                <div class="showcard">
                    <Card v-for="item in 6" :key="item" class="ccard"/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="个人中心">
                <!-- 内容展示 -->
                <div class="showcard">
                    <div class="top">
                        <div class="like">
                            <h3 style="line-height: 3vw;">点赞次数</h3>
                            <p style="font-size: 2vw; line-height: 2.5vw">0</p>
                        </div>
                        <div class="like">
                            <h3 style="line-height: 3vw;">粉丝数</h3>
                            <p style="font-size: 2vw; line-height: 2.5vw">0</p>
                        </div>
                        <div class="like">
                            <h3 style="line-height: 3vw;">收藏数</h3>
                            <p style="font-size: 2vw; line-height: 2.5vw">0</p>
                        </div>
                    </div>
                    <personal_card v-for="item in 6" :key="item" class="ccard"/>
                </div>
            </el-tab-pane>
            
        </el-tabs>
        
    </div>
</template>

<script setup lang="ts">
//引入首页热点card组件
import Card from './card/index.vue'
import personal_card from 
</script>

<style scoped lang="scss">
.tabs{
    width: 100%;
    height: 80px;
    
    //深度选择器
    ::v-deep(.el-tabs__item){
        font-size: 20px;
    }

    .showcard{
        background-color:#fff;
        width: 100%;
        height:auto;
        .ccard{
            margin-bottom: 1vw;
        }
        
    }
}

</style>